﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>数据监控</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./fonts/onephoto/iconfont.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/com_table.css">
    <link rel="stylesheet" href="./css/onePhoto.css">
    <link rel="stylesheet" href="./css/datajk.css">

    <!--[if lt IE 9]>
      <script src="./lib/ie9/html5.min.js"></script>
      <script src="./lib/ie9/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- 弄到数据 -->
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:;">监控管理</a>
            <a href="javascript:;">数据监控</a>
        </span>
        <!-- <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a> -->
    </div>

    <!-- 联网企业分布一张图 -->
    <div class="containerMain comLianWang lianwangBg jk_dataWrap">
        <!-- 联网企业名称 -->
        <div class="containerfl">
            <div class="searchBtn">
                <input type="text" placeholder="联网企业名称">
                <img src="./images/jk_data/data_jk.png" alt="">
            </div>

            <h2 class="containerfl_title">全部单位23个</h2>
            <!-- 菜单 -->
            <div class="layui-form-item">

                <div class="layui-input-inline">
                    <div id="treeW"></div>
                </div>
            </div>
        </div>
        <div class="rightWrap">
            <div class="dataContW clearfix">
                <!-- 单位信息 -->
                <div class="comDw">
                    <h2>单位信息</h2>
                    <p>
                        单位类别：高危单位
                    </p>
                    <p>
                        年检状态：已年检
                    </p>
                    <p>
                        负责人：张峰山
                    </p>
                    <p>
                        电话：13534200318
                    </p>
                    <p>
                        河北省张家口市长青路12号
                    </p>
                </div>
                <div class="comDw">
                    <h2>负责维保单位</h2>
                    <p>
                        大德商务会馆
                    </p>
                    <p>
                        值班人：温崇新
                    </p>
                    <p>
                        负责人：张峰
                    </p>
                    <p>
                        电话：0313-8185550
                    </p>
                    <p>
                        张家口市桥东区钻石中路3号
                    </p>
                </div>
                <div class="comDw">
                    <h2>所属负责消防队</h2>
                    <p>
                        北方学院附属第一医院
                    </p>
                    <p>
                        值班人：张泽浩
                    </p>
                    <p>
                        负责人：张峰山
                    </p>
                    <p>
                        电话： 0313-8043555
                    </p>
                    <p>
                        张家口市桥西区长青路14号
                    </p>
                </div>
                <div class="comDw">
                    <div id="mainBing" style="width: 100%;height:100%"></div>
                </div>
            </div>

            <!-- 表格 -->
            <div class="tableW">
                <div class=" toptable">
                    <div class="tags fl" id="tagW">
                        <span class="active">在线</span>
                        <span>报警</span>
                        <span>故障</span>
                        <span>离线</span>
                    </div>
                    <div class="shuruk fl">
                        <select name="" selected>
                            <option value="0" selected>设备类型</option>
                        </select>
                        <select name="" id="" selected>
                            <option value="" selected>设备状态</option>
                        </select>
                        <input type="text" name="" id="" placeholder="设备地址">
                    </div>
                    <!-- <div class="fr msg">当前数量：100</div> -->
                </div>
                <table class="layui-hide" id="tableL" lay-filter="tableL">
                </table>

                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="lookbtn">查看</a>
                    <!-- <a class="layui-btn layui-btn-xs" lay-event="del">删除</a> -->
                    </script>
            </div>
        </div>
        <!-- 背景图 -->
        <img src="./images/login/bg.png" alt="" class="lianwangImg jk_lianwangImg">
    </div>



    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/config.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js"></script>
    <script type="text/javascript" src="./js/munu.js"></script>
    <script type="text/javascript" src="plugins/echarts/index.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript">
        layui.use(['tree', 'table'], function () {
            $ = layui.jquery;
            var tree = layui.tree;  //树形菜单

            var table = layui.table;
            var hideMenu = [];
            var wData = {
                Command: "ReadPagingData",
                TableName: "DotBanks"
            };
            var url = './data/jk_datajk.json';
            var headArr = [
                { field: 'id', title: '序号', sort: true },
                { field: 'sbxh', title: '设备编号' },
                { field: 'dz', title: '设备详细地址' },
                { field: 'leix', title: '设备类型' },
                { field: 'xinghao', title: '设备型号' },
                { field: 'jw', title: '经纬度' },
                { field: 'zt', title: '设备状态' },
                { title: '操作', toolbar: '#barDemo' }
            ];

            /*************表格***************/

            var tab = renderTable(table, url, '#tableL', wData, headArr, function (res) {
                $('[data-field=Id]').hide();
            });

            //修改跳转
            table.on('tool(tableL)', function (obj) {
                var that = this;
                var data = obj.data;
                if (obj.event === 'lookbtn') {
                    store.save('editData', data);
                    window._EditFrameIndex = x_admin_show('设备状态详情', './jk_datajk _detail.html', 900, 640);
                }
            });

            //  选项卡
            var tabChangeFn = (function () {
                var spanIcon = $('.comIcon', '#chooseTab');
                var comLianWang = $('.comLianWang');
                spanIcon.each(function (i) {
                    $(this).click(function () {
                        spanIcon.removeClass('active');
                        comLianWang.hide();
                        comLianWang.eq(i).show();
                        $(this).addClass('active');
                    })
                })
            })();

            // 生成数据报表点击事件
            var dataFn = (function () {
                var divIcon = $('#scsjbb');
                divIcon.click(function () {
                    $(this).toggleClass('active');
                })
            })();

            //建筑类型选择
            // 消防物资选择

            var iFn = (function () {
                var iIcon = $('.iconfont');

                iIcon.each(function (i) {
                    // 判断是否需要全选与否
                    $(this).click(function () {
                        $(this).toggleClass('icon-duoxuan');
                        $(this).toggleClass('icon-duoxuankuang');
                        var jzIcon = $('.jz_content .iconfont');
                        var xfIcon = $('.iconAllXF .iconfont');
                        var isAllSelectJZ = [...jzIcon].every(function (item, i) {
                            return $(item).hasClass('icon-duoxuan')
                        });
                        var isAllSelectXF = [...xfIcon].every(function (item, i) {
                            return $(item).hasClass('icon-duoxuan')
                        });
                        if (isAllSelectJZ) {
                            $('.iconAllJZ').removeClass('icon-duoxuankuang').addClass('icon-duoxuan');
                        } else {
                            $('.iconAllJZ').removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                        }
                        if (isAllSelectXF) {
                            $('.iconAllXF').removeClass('icon-duoxuankuang').addClass('icon-duoxuan');
                        } else {
                            $('.iconAllXF').removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                        }
                    });

                });

                $(".iconAllJZ").click(function () {
                    if ($(this).hasClass('icon-duoxuankuang')) {
                        $(this).removeClass('icon-duoxuankuang').addClass('icon-duoxuan');
                        $('.iconfont', '.jz_content').removeClass('icon-duoxuankuang').addClass('icon-duoxuan')
                    } else {
                        $(this).removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                        $('.iconfont', '.jz_content').removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                    }
                });
                $(".iconAllXF").click(function () {
                    if ($(this).hasClass('icon-duoxuankuang')) {
                        $(this).removeClass('icon-duoxuankuang').addClass('icon-duoxuan');
                        $('.iconfont', '.xf_content').removeClass('icon-duoxuankuang').addClass('icon-duoxuan')
                    } else {
                        $(this).removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                        $('.iconfont', '.xf_content').removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                    }
                })

            })();


            treeFn('#treeW');
            function treeFn(obj) {
                var inst1 = tree.render({
                    elem: obj, //绑定元素
                    showCheckbox: true,
                    

                    data: [{
                        id: 1,
                        title: '张家口市',//一级菜单
                        spread: true,
                        children: [
                            {
                                id: '1_1',
                                title: '张家口供电公司'//二级菜单
                            },
                            {
                                id: '1_2',
                                title: '中保大厦'
                            },
                            {
                            id: '1_3',
                            title: '北站建行'
                            },
                            {
                            id: '1_4',
                            title: '宝善街建行'
                            },
                            {
                            id: '1_5',
                            title: '明德南建行'
                            },
                            {
                            id: '1_6',
                            title: '建行档案馆'
                            },
                            {
                            id: '1_7',
                            title: '附属医院'
                            },
                            {
                            id: '1_8',
                            title: '铁建联创大厦'
                            },
                            {
                            id: '1_9',
                            title: '烟厂厂区'
                            },
                            {
                            id: '1_10',
                            title: '烟厂库区'
                            },
                            {
                            id: '1_11',
                            title: '大德商务会馆'
                            },
                            {
                            id: '1_12',
                            title: '农村信用联社'
                            },
                            {
                            id: '1_13',
                            title: '市政府'
                            }
                        ]
                    },
                    {
                        id: 2,
                        title: '宣化县' //一级菜单
                        ,
                        children: [
                            {
                                id: '2_1',
                                title: '水库' //二级菜单
                            },
                            {
                                id: '2_2',
                                title: '学校' //二级菜单
                            },
                            {
                                id: '2_3',
                                title: '小区' //二级菜单
                            },
                            {
                                id: '2_3',
                                title: '写字楼' //二级菜单
                            }
                        ]
                    },
                    {
                        id: 3,
                        title: '张北县' //一级菜单
                        ,
                        children: [
                            {
                                id: '3_1',
                                title: '第一中队' //二级菜单
                            },
                            {
                                id: '3_2',
                                title: '第二中队' //二级菜单
                            }

                        ]
                    },
                    {
                        id: 4,
                        title: '下花园区' //一级菜单
                        ,
                        children: [
                            {
                                id: '1_3',
                                title: '酒店',//二级菜单
                                children: [
                                    {
                                        id: '1_3_1',
                                        title: '凯宾斯基大酒店' //三级菜单
                                    },
                                    {
                                        id: '1_3_2',
                                        title: '盘龙大酒店' //三级菜单
                                    }
                                ]
                            },
                            {
                                id: '1_4',
                                title: '加油站' //二级菜单
                            }

                        ]
                    }
                    ],
                    oncheck: function (obj) { //点击复选框时触发
                        console.log('obj', obj);
                    },
                    click: function (obj) { // 在节点被点击后触发
                        console.log('obj', obj);
                    },
                    operate: function (obj) {//添加删除了才会触发这个回调
                        console.log('operate', obj);
                    }
                });
            }




            /***饼图**/
            var myChartBing = echarts.init(document.getElementById('mainBing'));
            myChartBing.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },

                series: [
                    {
                        name: '',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data: [          // 数据数组，name 为数据项名称，value 为数据项值
                            { value: 25, name: '故障' },
                            { value: 25, name: '报警' },
                            { value: 25, name: '离线' },
                            { value: 25, name: '在线' }
                        ],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    //自定义颜色
                                    var colorList = ['#3bafff', '#324485', '#00d488', '#3feed4'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            })


            /*********离线tab选择*********/
            $('span', '#tagW').each(function (i) {
                $(this).click(function () {
                    $('span', '#tagW').removeClass('active')
                    $(this).addClass('active');

                })
            })

        });

    </script>
</body>

</html>